<template>
    <div class="detail">
	 <div v-for="item in data" >
	 	<div v-if="item.type==='mobile'" :style="{height:item.height + 'px'}" class="detailClass">
	 		<label>{{item.label}}</label>
	 		<div><span>{{item.value}}</span><img class="icon"  /></div>
	 	</div>
	 	
	 	<div v-else-if="item.type==='images'" :style="{height:item.height + 'px'}"  class="detailClass">
 			<p><em>*</em>{{item.label}}</p>
 			<p v-if=" item.value!='' "><img class="img_pho" @click="bigImg(item.value,index)" v-for="(img,index) in item.value" :key="index" :src="imUrl(img.FILE_PATH)" /></p>
	 	</div>
	 	<div v-else-if="item.type=='area'" >
	 		<van-field 
	            v-model="item.value"
	            type="textarea"
	            :label="item.label"
	            rows="1"
	    		autosize
	    		disabled
	            required/>
	 	</div>
	 	
	 	<div v-else>
	 		<van-field 
            v-model="item.value"
            center
            :label="item.label"
            disabled
            required/>
	 	</div>
	 </div>
    </div>
</template>

<script>
import { fileUrl } from '../axios/axios'
import {
    Row,
    Col,
    Cell,
    CellGroup,
    Field,
    Button,
    Icon,
    SwitchCell,
    Switch,
    ImagePreview
} from 'vant';
export default {
    name: 'detailInfo',
    components: {
        [Cell.name]:Cell,
        [CellGroup.name]: CellGroup,
        [Field.name]: Field,
        [Switch.name]: Switch,
        [ImagePreview.name]: ImagePreview
    },
    props:{
    	data:{
    		type:Array,
    		default:[]
    	}
    },
    data(){
    	return {
    	}
    },
    methods: {
    	imUrl(path) {
    		return fileUrl(path)
    	},
    	// 隐患处理方式栏目图片放大
		bigImg(img,index){
			var _this = this;
			var imgArr = [];
			img.forEach(v=>{
				var path = _this.imUrl(v.FILE_PATH);
				imgArr.push(path)
			})
			if(imgArr.length != 0){
				ImagePreview({
					images: imgArr,
					startPosition: index
				})
			}
		}
    },
    computed: {
    	
    },
    mounted(){
    	
    },
    watch:{
    	data(){
    		
    	}
    }
}
</script>
<style lang="less">
	.detail{
		box-sizing: border-box;
    	padding: 5px;
		width:100%;
		font-size:14px;
		background: white;
		.detailClass{
			em{
				color:red;
				padding-right: 5px;
    			margin-left: -3px;
    			font-size: 14px;
			}
			background: white;
    		padding: 10px;
			label{
				float:left;
				width:40%;
				text-align: left;
			} 
			div{
				float:right;
				width:60%;
				text-align: right;
				position:relative;
				.icon{
					width:20px;
					position:absolute;
					right:0;
					top:5px;
				}
				span{
					position:absolute;
					right:40px;
				}
				
			}
			p{
				text-align: left;
				img{
					text-align: left;
					width:20%;
					padding:5px;
				}
			}
		}
		.van-field__control{
			text-align: right;
		}
	}
</style>